@charset "utf-8";
/*
	Operation alsos - Secondary Theme for nordlicht

	File name: alsos.css
	File URL: funn/css/alsos.css
	Author: stephen giorgi
	Aurhor URL: http://www.alphavega.com
	Author email: stephen.giorgi@alphavega.com

Contents:
@0 - Imports/Reset
@1 - Header
@2 - Nav
	@2.1 - Nav Icons
		@2.1.1 - Today Icon
		@2.1.2 - Clock Icon
		@2.1.3 - Calander Icon
		@2.1.4 - Browser Icon
		@2.1.5 - OS Icon
		@2.1.6 - Country Icon
		@2.1.7 - IP Icon
		@2.1.8 - File Icon
		@2.1.9 - Robot Icon
		@2.1.10 - Magnifing Glass Icon
		@2.1.11 - Error Icon
@3 - Section Styles
	@3.1 - Section Tables
	@3.2 - Each Section
		@3.2.1 - Month to Date
		@3.2.2 - Year to Date
		@3.2.3 - Daily Breakdown
		@3.2.4 - Hourly Breakdown
		@3.2.5 - Month to Date
		@3.2.6 - Browser/OS
		@3.2.7 - Domain/IP
		@3.2.8 - File Types
		@3.2.9 - Robots
		@3.2.10 - Searches
		@3.2.11 - Errors
@9 - Footer/Globals

*/
/*###############
@0 - Imports/Reset 
###############*/
@import url(http://fonts.googleapis.com/css?family=PT+Sans);
@import url(http://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT);
@import url(http://fonts.googleapis.com/css?family=Neuton);
html		{ overflow:scroll }
html,body	{ height:100% }
ul			{ margin:0 }
html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,img,strong,sup				{ margin:0; padding:0; border:none; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section	{display:block; }
a		{ outline:none; }
body	{ background:#545454; color:#fff; }

#statsInfo {
	margin-left:125px;
	margin-top:50px;
}
/*###############
@1 - Header
###############*/
header {
	background:rgba(0,0,0,0.7);
	-webkit-border-radius:0 0 10px 10px;
	-moz-border-radius:0 0 10px 10px;
	border-radius:0 0 10px 10px;
	position:fixed;
	left:140px;
	top:0;
	width:85%;
	height:65px;
	opacity:0.3;
}
header p 		{ font-size:18px; text-align:center; }
header:hover	{
	opacity:1;
	-webkit-transition:0.5s ease-out;
	-moz-transition:0.5s ease-out;
	-o-transition:0.5s ease-out;
	-ms-transition:0.5s ease-out;
	transition:0.5s ease-out;
}

#controls		{ position:relative; }
#controls .dropDown {
	position:absolute;
	left:10px;
	top:5px;
}
#controls .ddChild {
	top:30px !important;
	left:4px;
}
#datePickHolder {
	position:absolute;
	top:7px;
	left:350px;
}

#goToStats {
	position:absolute;
	left:530px;
}

/*###############
@2 - Nav
###############*/
nav {
	background:#da424e;
	background:-moz-linear-gradient(top, #da424e 0%, #480D11 70%, #000000 100%); /* firefox */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#da424e), color-stop(70%,#480D11), color-stop(100%,#000000)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#da424e', endColorstr='#000000',GradientType=0 ); /* ie */
	border:2px solid;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	width:250px;
	position:fixed;
	left:-175px;
	-webkit-box-shadow: 2px 2px 15px 5px rgba(218, 66, 78, 0.8);
	-moz-box-shadow: 2px 2px 15px 5px rgba(218, 66, 78, 0.8);
	box-shadow: 2px 2px 15px 5px rgba(218, 66, 78, 0.8);
	-webkit-transition:0.2s;
	-moz-transition:0.2s;
	-o-transition:0.2s;
	-ms-transition:0.2s;
	transition:0.2s;
}

nav:hover {
	left:10px;
	-webkit-transition:0.5s ease-in;
	-moz-transition:0.5s ease-in;
	-o-transition:0.5s ease-in;
	-ms-transition:0.5s ease-in;
	transition:0.5s ease-in;
}

nav ul 		{ list-style:none; }
nav ul li 	{
	text-align:right;
}

nav ul li:first-child	{ margin-top:5px; }
nav ul li:last-child 	{ margin-bottom:5px; }
nav ul li:hover {
    background:rgba(0,0,0,0.6);
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	-moz-box-shadow: inset 2px 2px 10px rgba(255,255,255,0.5),
			 inset -2px -2px 10px rgba(255,255,255,0.5);
	-webkit-box-shadow: inset 2px 2px 10px rgba(255,255,255,0.5),
			inset -2px -2px 10px rgba(255,255,255,0.5);
	box-shadow: inset 2px 2px 10px rgba(255,255,255,0.5),
			inset -2px -2px 10px rgba(255,255,255,0.5);
			
}

nav ul li a {
	margin-right:77px;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
}

/*###############
@2.1 - Nav Icons
###############*/
.navIcon {
	width:32px;
	height:32px;
	display:block;
	font-family:serif;
	position:relative;
	left:148px;
	top:-17px;
}

/*@2.1.1 - Today Icon*/
#todayIcon {
	background:#fff;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	-webkit-border-bottom-left-radius:4px;
	-webkit-border-bottom-right-radius:4px;
	-moz-border-radius-bottomleft:4px;
	-moz-border-radius-bottomright:4px;
	border-bottom-left-radius:4px;
	border-bottom-right-radius:4px;
	-webkit-box-shadow:inset 1px 1px 4px rgba(41,41,41,0.5);
	-moz-box-shadow:inset 1px 1px 4px rgba(41,41,41,0.5);
	text-align:center;
	color:#000;
	text-shadow:0px 1px 0px #666;
	font-weight:bold;
}
#todayIcon > span {
	font-size:10px;
	background:rgba(255,13,0,0.9);
	-webkit-border-top-left-radius:2px;
	-webkit-border-top-right-radius:2px;
	-moz-border-radius-topleft:2px;
	-moz-border-radius-topright:2px;
	border-top-left-radius:2px;
	border-top-right-radius:2px;
	display:block;	
	height:12px;
}

/*@2.1.2 - Clock Icon*/
#clock {
	background:rgba(174,5,5,0.9);
	background:rgba(255,255,255,1);
	-webkit-border-radius:16px;
	-moz-border-radius:16px;
	border-radius:16px;
	-moz-box-shadow:2px 2px 2px #000,
		inset 2px 2px 5px #CCC;
	-webkit-box-shadow:2px 2px 2px #000;
	top:-19px;
}
.minHand {
	height:14px;
	width:0;
	margin:2px auto 0;
	border:1px solid #333;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-topright:3px;
	display:block;
}
.hourHand {
	height:7px;
	width:0;
	margin:0 auto;
	border:1px solid #333;
	display:block;
}
.hour01 {
	-webkit-transform:rotate(30deg);
	-moz-transform:rotate(30deg);
	-o-transform:rotate(30deg);
	transform:rotate(30deg);
	margin:-9px 18px;
}
.hour02 {
	-webkit-transform:rotate(60deg);
	-moz-transform:rotate(60deg);
	-o-transform:rotate(60deg);
	transform:rotate(60deg);
	margin:-7px 19px;
}
.hour03 {
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	transform:rotate(90deg);
	margin:-3px 21px;
}
.hour04 {
	-webkit-transform:rotate(120deg);
	-moz-transform:rotate(120deg);
	-o-transform:rotate(120deg);
	transform:rotate(120deg);
	margin:0px 20px;
}
.hour05 {
	-webkit-transform:rotate(150deg);
	-moz-transform:rotate(150deg);
	-o-transform:rotate(150deg);
	transform:rotate(150deg);
	margin:2px 18px;
}
.hour06 {
	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	-o-transform:rotate(180deg);
	transform:rotate(180deg);
	margin:3px auto;
}
.hour07 {
	-webkit-transform:rotate(210deg);
	-moz-transform:rotate(210deg);
	-o-transform:rotate(210deg);
	transform:rotate(210deg);
	margin:1px 12px;
}
.hour08 {
	-webkit-transform:rotate(240deg);
	-moz-transform: rotate(240deg);
	-o-transform: rotate(240deg);
	transform: rotate(240deg);
	margin:-1px 9px;
}
.hour09 {
	-webkit-transform:rotate(270deg);
	-moz-transform:rotate(270deg);
	-o-transform:rotate(270deg);
	transform:rotate(270deg);
	margin:-6px 8px;
}
.hour10 {
	-webkit-transform:rotate(300deg);
	-moz-transform:rotate(300deg);
	-o-transform:rotate(300deg);
	transform:rotate(300deg);
	margin:-7px 9px;
}
.hour11 {
	-webkit-transform:rotate(330deg);
	-moz-transform:rotate(330deg);
	-o-transform:rotate(330deg);
	transform:rotate(330deg);
	margin:-10px 12px;
}
.hour12	{ margin:-7px auto; }
.clockInner {
	background:#452200;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	display:block;
	width:6px;
	height:6px;
	position:absolute;
	top:13px;
	left:13px;
	z-index:100;
}

/*@2.1.3 - Calander Icon*/
#monthIcon { top:-19px; }
.calRing {
	background:#000;
	border-radius:5px;
	-moz-border-radius:5px;
	width:5px;
	height:15px;
	display:block;
	border-bottom-color:#900;
	position:absolute;
	top:0;
	z-index:100;
}
#monthIcon .calRing:nth-child(1) {
	left:4px;
}
#monthIcon .calRing:nth-child(2) {
	right:4px;
}
.calPaper {
	position:absolute;
	top:8px;
	left:1px;
	background:#fff;
	display:block;
	width:30px;
	height:25px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	-webkit-box-shadow:2px 2px 2px #333333,
		inset 3px 2px 5px rgba(255, 255, 255, 0.4),
		inset -1px -1px 5px #292929;
	-moz-box-shadow:2px 2px 2px #333333,
		inset 3px 2px 5px rgba(255, 255, 255, 0.4),
		inset -1px -1px 5px #292929;
	box-shadow:2px 2px 2px #333333,
		inset 3px 2px 5px rgba(255, 255, 255, 0.4),
		inset -1px -1px 5px #292929;
	
}
.calName {
	margin:5px auto;
	display:block;
	font-weight:bold;
	color:rgba(41,41,41,1);
	text-shadow:0px 1px 0px #CCC;
	width:28px;
}

/*@2.1.4 - Browser Icon*/
/*@2.1.5 - OS Icon*/
#OSIcon {

}
.OSscreen {
	-moz-box-shadow:inset 0 5px 5px rgba(255, 255, 255, 0.6),
			inset 5px 0 15px rgba(255, 255, 255, 0.3),
			inset 0 0 5px #000,
			inset -5px -5px 13px rgba(255, 255, 255, 0.3),
			inset -1px -1px 1px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow:inset 0 5px 5px rgba(255, 255, 255, 0.6),
			inset 5px 0 15px rgba(255, 255, 255, 0.3),
			inset 0 0 5px #000,
			inset -5px -5px 13px rgba(255, 255, 255, 0.3),
			inset -1px -1px 1px rgba(0, 0, 0, 0.4);
	box-shadow:inset 0 5px 5px rgba(255, 255, 255, 0.6),
			inset 5px 0 15px rgba(255, 255, 255, 0.3),
			inset 0 0 5px #000,
			inset -5px -5px 13px rgba(255, 255, 255, 0.3),
			inset -1px -1px 1px rgba(0, 0, 0, 0.4);
	background:none repeat scroll 0 0 #145AF5;
	border:2px solid #D6D6D6;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;	
	display:block;
	height:20px;
	position:absolute;
	width:28px;
	z-index:100;
}
.OSbase {
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	border-radius:20px;
	/*-webkit-box-shadow:1px 1px 3px #fff inset;*/
	-moz-box-shadow:1px 1px 3px #fff inset;
	box-shadow:1px 1px 3px #fff inset;
	background:none repeat scroll 0 0 #333333;
	display:block;
	height:10px;
	left:7px;
	position:absolute;
	top:21px;
	width:20px;
	z-index:99;
}

/*@2.1.6 - Country Icon*/
#countryIcon {
	height:24px;
	background:#fff;
	-moz-box-shadow:inset 4px 4px 10px rgba(41,41,41,0.4);
	-webkit-box-shadow:inset 4px 4px 10px rgba(41,41,41,0.4);
	box-shadow:inset 4px 4px 10px rgba(41,41,41,0.4);
}
.ring {
	border:1px solid;
	border-radius:8px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	width:8px;
	height:8px;
	background:none;
	position:absolute;
	display:block
}
.ring1 {
	border-color:#00C;
	left:1px;
	top:5px;

}
.ring2 {
	left:11px;
	top:5px;
}
.ring3 {
	border-color:#C00;
	left:22px;
	top:5px;
}
.ring4 {
	border-color:#FF0;
	left:6px;
	top:10px;
}
.ring5 {
	border-color:#060;
	left:18px;
	top:10px;
}

/*@2.1.7 - IP Icon*/
#IPIcon {
	background:rgba(0,51,0,0.7);
	-webkit-box-shadow:inset 0 5px 8px rgba(0,115,29,0.3),
			inset 2px 2px 7px rgba(255,255,255,0.3);
	-moz-box-shadow:inset 0 5px 8px rgba(0,115,29,0.3),
			inset 2px 2px 7px rgba(255,255,255,0.3);
	box-shadow:inset 0 5px 8px rgba(0,115,29,0.3),
			inset 2px 2px 7px rgba(255,255,255,0.3);
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
}
#IPIcon span {
	border:2px solid #fff;
	display:block;
	position:absolute;
	-webkit-box-shadow:inset 1px 1px 3px rgba(41,41,41,0.9);
	-moz-box-shadow:inset 1px 1px 3px rgba(41,41,41,0.9);
	box-shadow:inset 1px 1px 3px rgba(41,41,41,0.9);
}
.IPcon {
	background:#fff;
	border:none !important;
	-webkit-border-radius:2px !important;
	-moz-border-radius:2px !important;
	border-radius:2px !important;
    height:7px;
    width:7px;
    left:4px;
    top:3px;
}
#IPIcon span.IPcon:nth-child(2) {
	left:21px;
	top:22px;
}
.IPright {
	border-left:none !important;
	-webkit-border-radius:0 6px 6px 0;
	-moz-border-radius:0 6px 6px 0;
	border-radius:0 6px 6px 0;
    height:8px;
    width:12px;
    position:absolute;
	left:11px;
    top:6px;
}
.IPleft {
	border-right:none !important;
	-webkit-border-radius:6px 0 0 6px;
	-moz-border-radius:6px 0 0 6px;
	border-radius:6px 0 0 6px;
    height:8px;
    width:12px;
    left:7px;
    top:16px;
}

/*@2.1.8 - File Icon*/
#fileIcon {
	background: none repeat scroll 0 0 #FFFFFF;
	-webkit-border-radius:1px;
	-moz-border-radius:1px;
	border-radius:1px;	
	width:28px;
	-webkit-box-shadow:inset 0 -2px 7px rgba(41, 41, 41, 0.4);
	-moz-box-shadow:inset 0 -2px 7px rgba(41, 41, 41, 0.4);
	box-shadow:inset 0 -2px 7px rgba(41, 41, 41, 0.4);
	left:146px;
}
#fileIcon > span {
	border-color:rgba(0,58,110,0.85) rgba(0,58,110,0.85) #fff #fff;
	border-style:solid;
	border-width:5px;
	display:block;
	height:0;
	width:0;
	-webkit-box-shadow:-1px 2px 2px #000000;
	-moz-box-shadow:-1px 2px 2px #000000;
	box-shadow:-1px 2px 2px #000000;
	position:absolute;
	left:18px;
	top:0;	
}

/*@2.1.9 - Robot Icon*/
#robotIcon { top:-12px; }
#robotIcon .robotAntena {
	border:2px solid rgba(220,70,0,0.8);
	height:14px;
	width:0;
	display:block;
	position:absolute;
	top:-7px;
	z-index:90;
}
#robotIcon .robotAntena:nth-child(1) { left:8px; -moz-transform:rotate(150deg); -webkit-transform:rotate(150deg); -o-transform:rotate(150deg); transform:rotate(150deg); }
#robotIcon .robotAntena:nth-child(2) { right:8px; -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg); -o-transform:rotate(300deg); transform:rotate(300deg);}
#robotIcon .robotFace {
	background:rgba(41,41,41,0.9);
	-moz-box-shadow:inset 1px 1px 1px rgba(255,255,255,0.5),
		inset 5px 5px 3px rgba(0,0,0,0.7);
	-webkit-box-shadow:inset 1px 1px 1px rgba(255,255,255,0.5),
		inset 5px 5px 3px rgba(0,0,0,0.7);
	box-shadow:inset 1px 1px 1px rgba(255,255,255,0.5),
		inset 5px 5px 3px rgba(0,0,0,0.7);
	width:30px;
	height:28px;
	display:block;
	position:relative;
	margin:0 auto;
	z-index:100;
}
#robotIcon .robotEye {
	display:block;
	width:2px;
	height:2px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	border:4px solid #fff;
	background:#000;
	position:absolute;
	top:3px;
}
#robotIcon .robotEye:nth-child(1) { left:1px; }
#robotIcon .robotEye:nth-child(2) {	right:1px; }
#robotIcon .robotMouth {
	border-collapse:collapse;
	background:#fff;
	position:absolute;
	bottom:1px;
	left:4px;
}
#robotIcon .robotMouth tr {
	border:none;
}
#robotIcon .robotMouth tr td {
	width:3px;
	height:4px;
	border:2px solid #000;
	padding:0;
}

/*@2.1.10 - Magnifing Glass Icon*/
#searchIcon { 
	background:rgba(62,201,231,0.5);
	border:2px solid #000;
	display:block;
	width:20px;
	height:20px;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	-webkit-box-shadow:inset 2px 2px 2px rgba(255,255,255,0.4),
		inset -2px -1px 5px rgba(255,255,255,0.7),
		inset 5px 5px 10px rgba(255,255,255,0.8);
	-moz-box-shadow:inset 2px 2px 2px rgba(255,255,255,0.4),
		inset -2px -1px 5px rgba(255,255,255,0.7),
		inset 5px 5px 10px rgba(255,255,255,0.8);
	box-shadow:inset 2px 2px 2px rgba(255,255,255,0.4),
		inset -2px -1px 5px rgba(255,255,255,0.7),
		inset 5px 5px 10px rgba(255,255,255,0.8);
}
#searchIcon > span{
	background:rgba(63,37,11,1);
	display:block;
	height:17px;
	margin:18px;
	width:4px;
	-webkit-transform:rotate(-30deg);
	-moz-transform:rotate(-30deg);
	-o-transform:rotate(-30deg);
	transform:rotate(-30deg);
	-moz-box-shadow:inset 1px 1px 4px rgba(0,0,0,0.5);
}

/*@2.1.11 - Error Icon*/
#errorIcon { 
	background:rgba(161,14,14,1);
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	color:#fff;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
	font-size:26px;
	text-align:center;
	text-shadow:0px -1px 1px #333;
	-webkit-box-shadow:inset 1px 1px 5px rgba(255,130,130,0.4),
		inset 0px -2px 5px rgba(0,0,0,0.5),
		inset 0px 2px 5px rgba(255,255,255,0.2);
	-moz-box-shadow:inset 1px 1px 5px rgba(255,130,130,0.4),
		inset 0px -2px 5px rgba(0,0,0,0.5),
		inset 0px 2px 5px rgba(255,255,255,0.2);
	box-shadow:inset 1px 1px 5px rgba(255,130,130,0.4),
		inset 0px -2px 5px rgba(0,0,0,0.5),
		inset 0px 2px 5px rgba(255,255,255,0.2);
}

/*###############
@3 - Sections
###############*/
section {
	background:rgba(4,212,72,0.3);
	border:3px solid #fff;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
	margin:10px;
}
section h2 {
	background:#5d0007;
	background:#026623;
	border-bottom:3px solid #fff;
	-moz-border-radius:15px 15px 0 0;
	-webkit-border-radius:15px 15px 0 0;
	border-radius:15px 15px 0 0;
	font-family:'Neuton', Verdana, Geneva, sans-serif;
	font-size:24px;
	font-weight:normal;
	text-align:center;
	text-shadow:0 0 5px #000;
}
section h3 {
	text-align:center;
	margin-top:10px;
	border-bottom:2px solid black;
}
section img {
	display:block;
	margin:5px auto;
}

.fullList {
	background:rgba(51, 126, 168, 0.9);
	border:1px solid #333;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	margin:5px auto;
	padding:5px;
	width:50px;
	display:block;
	font-size: 12px;
    font-weight:bold;
    color:#fff;
	text-decoration:none;
	text-align:center;
    text-shadow:0 1px 2px #000;
	-moz-box-shadow:inset 2px 2px 5px 5px rgba(255,255,255,0.5);
	-webkit-box-shadow:inset 2px 2px 5px 5px rgba(255,255,255,0.5);
	box-shadow:inset 2px 2px 5px 5px rgba(255,255,255,0.5);
}
.fullList:hover {
	color:#05537e;
    text-shadow:0 -1px 2px #fff;
	-moz-box-shadow:inset 2px 2px 5px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow:inset 2px 2px 5px 5px rgba(0,0,0,0.5);
	box-shadow:inset 2px 2px 5px 5px rgba(0,0,0,0.5);
}

/*###############
@3.1 - Section Tables
###############*/
section table {
	background:#fff;
	border-collapse:collapse;
	color:#000;
	margin:10px auto;
}
section table tr:nth-child(odd) {
	background:#CCC;
}
section table th {
	background:#666;
	padding:5px;
	color:#9f9f9f;
	text-align:center;
	text-shadow:0px 1px 0px black;
}

section th.Pages 	{ text-shadow:0px 0px 5px #0032FF; }
section th.Hits		{ text-shadow:0px 0px 5px #00FF6C; }
section th.Bandwidth	{ text-shadow:0px 0px 5px #6C6C6C; }
section th.Visits	{ text-shadow:0px 0px 5px #FF2E34; }
section tr, section table td, section th		{ border:1px solid #333; }

section tr:hover,
section table tr:nth-child(odd):hover {
	background:#da424e;
	color:#000;
	-webkit-transition:0.2s ease-out;
	-moz-transition:0.2s ease-out;
	-o-transition:0.2s ease-out;
	-ms-transition:0.2s ease-out;
	transition:0.2s ease-out;
}
section table a {
	text-decoration:none;
	border-bottom:1px dotted;
	color:#0175b6;
	margin-left:10px;
}

.tableHold {
	width:80%;
	margin:0 auto;
}

/*###############
@3.2 Each Section
###############*/
/*@3.2.1 Month to Date */
#todayStats	{ margin-left:20px; }
/*@3.2.2 Year to Date */
/*@3.2.3 Daily Breakdown */
#daily		{ min-width:950px; }
#dailyHold	{
	margin:10px auto;
	width:90%;
}
#dailyTotal, #dailyAvg {
	width:40%;
	min-width:300px;
	float:left;
	margin:5px;
}
#dailyAvg { float:right; }

/*@3.2.4 Hourly Breakdown */
#hours 				{ min-width:975px; }
#hours .tableHold 	{ width:800px; }
#hours table,
#month table {
	width:345px;
	float:left;
	margin:10px 20px;
}
#hours table:nth-child(2),
#month table:nth-child(2) { float:right; }

/*@3.2.5 Month to Date */
#month 				{ min-width:1010px; }
#month .tableHold 	{ width:950px; }

/*@3.2.6 Browser/OS */
#browserOS 				{ min-width:1000px; }
#browserOS .tableHold 	{ width:450px; margin:15px;}
#browserOS img 			{ margin:10px 0; }
#browser 				{ float:left; }
#os 					{ float:right; }
#browser table img,
#domain table img,
#content table img {
	float:left;
	margin:2px 5px;
}


/*@3.2.7 Domain/IP */
#domain 	{ width:850px; margin:0 auto; }
#domain img { float:right; }
#IP 		{ width:500px; margin:15px auto; }

/*@3.2.8 File Types*/
#content		{ min-width:800px; margin:0 auto; }
#files, #se, #searchPhrase 	{
	width:300px;
	float:left;
	margin:20px;
}
#pages, #robots, #searchWord	{
	width:450px;
	margin:20px;
	float:right;
}

/*@3.2.9 Robots*/
/*@3.2.10 Searches*/
/*@3.2.11 Errors*/

/*###############
@9.0 - Footer/Globals
###############*/
footer {
	margin:50px auto;
	text-align:center;
	padding:15px;
	background:rgba(218,66,78,0.6);
	-webkit-box-shadow:0 -5px 10px rgba(218, 66, 78, 0.4),
			0 -10px 5px 10px rgba(255,255,255,0.3),
			0 5px 10px rgba(218, 66, 78, 0.2),
			0 15px 5px rgba(0,0,0,0.2);
	-moz-box-shadow:0 -5px 10px rgba(218, 66, 78, 0.4),
			0 -15px 5px 10px rgba(255,255,255,0.3),
			0 5px 10px rgba(218, 66, 78, 0.2),
			0 15px 5px rgba(0,0,0,0.2);
	box-shadow:0 -5px 10px rgba(218, 66, 78, 0.4),
			0 -10px 5px 10px rgba(255,255,255,0.3),
			0 5px 10px rgba(218, 66, 78, 0.2),
			0 15px 5px rgba(0,0,0,0.2);
}
footer a 	{ color:#000; }
.floatLeft	{ float:left; }
.floatRight	{ float:right; }
.clear		{ clear:both; }
.hidden		{ display:none; }
.bold		{ font-weight:bold; }
.italic		{ font-style:italic; }/*###############
@10.1 - Colorbox buffel theme
###############*/
/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox, #cboxOverlay, #cboxWrapper {
	position:absolute;
	top:0;
	left:0;
	z-index:9999;
	overflow:hidden;
}
#cboxOverlay {
	position:fixed;
	width:100%;
	height:100%;
}
#cboxMiddleLeft, #cboxBottomLeft	{ clear:left; }
#cboxContent		{ position:relative; overflow:visible; }
#cboxLoadedContent	{ overflow:auto; }
#cboxLoadedContent iframe {
	border:0;
	display:block;
	width:100%;
	height:100%;
}
#cboxTitle	{ margin:0; }
#cboxLoadingOverlay, #cboxLoadingGraphic {
	position:absolute;
	top:0;
	left:0;
	width:100%;
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor:pointer; }

/*Colorbox Theme 5 theme styles*/
#cboxOverlay{background:#000;}
    #cboxTopLeft{width:14px; height:14px; background:url(../img/colorbox/t5/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(../img/colorbox/t5/border.png) repeat-x top left;}
    #cboxTopRight{width:14px; height:14px; background:url(../img/colorbox/t5/controls.png) no-repeat -36px 0;}
    #cboxBottomLeft{width:14px; height:43px; background:url(../img/colorbox/t5/controls.png) no-repeat 0 -32px;}
    #cboxBottomCenter{height:43px; background:url(../img/colorbox/t5/border.png) repeat-x bottom left;}
    #cboxBottomRight{width:14px; height:43px; background:url(../img/colorbox/t5/controls.png) no-repeat -36px -32px;}
    #cboxMiddleLeft{width:14px; background:url(../img/colorbox/t5/controls.png) repeat-y -175px 0;}
    #cboxMiddleRight{width:14px; background:url(../img/colorbox/t5/controls.png) repeat-y -211px 0;}
    #cboxContent{background:#fff;}
        #cboxLoadedContent{margin-bottom:5px;}
        #cboxLoadingOverlay{background:url(../img/colorbox/t5/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(../img/buffel/loading.gif) no-repeat center center;}
        #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
        #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
        
        #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(../img/colorbox/t5/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
        #cboxPrevious{left:0px; background-position: -51px -25px;}
        #cboxPrevious.hover{background-position:-51px 0px;}
        #cboxNext{left:27px; background-position:-75px -25px;}
        #cboxNext.hover{background-position:-75px 0px;}
        #cboxClose{right:0; background-position:-100px -25px;}
        #cboxClose.hover{background-position:-100px 0px;}
        
        .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
        .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
        .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}/*###############
@10.2 - Datatables buffel theme
###############*/
#colorbox section {
	background:none;
	color:#000;
	margin:0;
	border:none;
}
#colorbox section.dataTables_wrapper	{
	background:#6b6b6b;
	font-weight:bold;
	color:#fff;
}
.dataTableTop {
	position:relative;
	background:#DA424E; /* old browsers */
	background:-moz-linear-gradient(top, #DA424E 0%, #DA424E 25%, #6b6b6b 90%); /* firefox */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#DA424E), color-stop(25%,#DA424E), color-stop(90%,#6b6b6b)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DA424E', endColorstr='#6b6b6b',GradientType=0 ); /* ie */
	-moz-border-radius:10px 10px 0 0;
	-webkit-border-radius:10px 10px 0 0;
	border-radius:10px 10px 0 0;
	height:40px;
	text-shadow:1px 1px 1px #000;
}
.dataTables_length {
	position:absolute;
	left:10px;
	top:5px;
}
.dataTables_info {
	text-align:center;
	padding-top:5px;
}
.dataTables_filter {
	position:absolute;
	top:5px;
	right:10px;
}
.dataTables_wrapper table			{ margin:0 auto; font-weight:normal; }
.dataTables_wrapper table thead	tr th	{ background:#780000; color:#fff; }
.dataTables_wrapper table td img 	{ float:left;  margin:5px; }
.dataTables_paginate {
	background:#6b6b6b; /* old browsers */
	background:-moz-linear-gradient(top, #6b6b6b 10%, #DA424E 75%, #DA424E 100%); /* firefox */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(10%,#6b6b6b), color-stop(75%,#DA424E), color-stop(100%,#DA424E)); /* webkit */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b6b6b', endColorstr='#DA424E',GradientType=0 ); /* ie */
	padding-top:15px;
	height:30px;
	text-shadow:1px 1px 1px #000;
	text-align:center;
}
.first.paginate_button,
.previous.paginate_button {
	margin-right:20px;
}
.last.paginate_button,
.next.paginate_button {
	margin-left:20px;
}
.paginate_button,
.paginate_active {
	margin:10px;
}
.paginate_button:hover {
	cursor:pointer;
	color:#000;
	text-shadow:1px 1px 1px #fff;
	-webkit-transition:0.2s ease-out;
	-moz-transition:0.2s ease-out;
	-o-transition:0.2s ease-out;
	-ms-transition:0.2s ease-out;
	transition:0.2s ease-out;
}
.paginate_active {
	padding:0 3px;
	border-bottom:1px solid #000;
}/*###############
@10.4 - Date Picker buffel theme
###############*/
#datePickHolder .datepick-popup {
	top:25px !important;
	left:0 !important;
}
.datepick table {
	background:#000;
}
.datepick-nav		{ text-align:center; }
.datepick-cmd-prev	{ float:left; }
.datepick-cmd-next	{ float:right; }



/***********/
/* Default styling for jQuery Datepicker v4.0.4. */
.datepick-popup { z-index: 1000; }
.datepick-disable {
	position:absolute;
	z-index:100;
	background-color:white;
	opacity:0.5;
	filter:alpha(opacity=50);
}
.datepick a { color:#fff; text-decoration:none; }
.datepick a.datepick-disabled { color:#888; cursor:auto; }
.datepick button {
	margin:0.25em;
	padding:0.125em 0em;
	background-color:#fcc;
	border:none;
	border-radius:0.25em;
	-moz-border-radius:0.25em;
	-webkit-border-radius:0.25em;
	font-weight:bold;
}
.datepick-nav, .datepick-ctrl {
	float:left;
	width:100%;
	background-color:#000;
	color:#fff;
	font-size:90%;
	font-weight:bold;
}
.datepick-ctrl { background-color:#600; }
.datepick-cmd { width:30%; }
.datepick-cmd:hover { background-color:#777; }
.datepick-ctrl .datepick-cmd:hover { background-color:#f08080; }
.datepick-cmd-prevJump, .datepick-cmd-nextJump { width:8%; }
a.datepick-cmd { height:1.5em; }
button.datepick-cmd { text-align:center; }
.datepick-cmd-prev, .datepick-cmd-prevJump, .datepick-cmd-clear { float:left; padding-left:2%; }
.datepick-cmd-current, .datepick-cmd-today {
	float:left;
	width:35%;
	text-align:center;
}
.datepick-cmd-next, .datepick-cmd-nextJump, .datepick-cmd-close {
	float:right;
	padding-right:2%;
	text-align:right;
}
.datepick-month-nav {
	float:left;
	background-color:#777;
	text-align:center;
}
.datepick-month-nav div {
	float:left;
	width:12.5%;
	margin:1%;
	padding:1%;
}
.datepick-month-nav span { color:#888; }
.datepick-month-row { clear:left; }
.datepick-month {
	float:left;
	width:15em;
	border:1px solid #444;
	text-align:center;
}
.datepick-month-header, .datepick-month-header select, .datepick-month-header input {
	height:1.5em;
	background-color:#444;
	color:#fff;
	font-weight:bold;
}
.datepick-month-header select, .datepick-month-header input { height:1.4em; border:none; }
.datepick-month-header input { position:absolute; display:none; }
.datepick-month table { width:100%; border-collapse:collapse; }
.datepick-month thead { border-bottom:1px solid #aaa; }
.datepick-month th, .datepick-month td {
	margin:0em;
	padding:0em;
	font-weight:normal;
	text-align:center;
}
.datepick-month th { border:1px solid #777; }
.datepick-month th, .datepick-month th a { background-color:#777; color:#fff; }
.datepick-month td { background-color:#eee; border:1px solid #aaa; }
.datepick-month td.datepick-week { border: 1px solid #777; }
.datepick-month td.datepick-week * {
	background-color: #777;
	color: #fff;
	border: none;
}
.datepick-month a {
	display: block;
	width: 100%;
	padding: 0.125em 0em;
	background-color: #eee;
	color: #000;
	text-decoration: none;
}
.datepick-month span {
	display: block;
	width: 100%;
	padding: 0.125em 0em;
}
.datepick-month td span { color: #888; }
.datepick-month td .datepick-other-month	{ background-color: #fff; }
.datepick-month td .datepick-weekend 		{ background-color: #ddd; }
.datepick-month td .datepick-today 			{ background-color: #f0c0c0; }
.datepick-month td .datepick-selected		{ background-color: #777; color: #fff; }
.datepick-month th.datepick-week 			{ background-color: #777; color: #fff; }
.datepick-status {
	clear: both;
	background-color: #ddd;
	text-align: center;
}
.datepick-clear-fix	{ clear: both; }
.datepick-cover {
	display: none;
	display/**/: block;
	position: absolute;
	z-index: -1;
	filter: mask();
	top: -1px;
	left: -1px;
	width: 100px;
	height: 100px;
}


/*buffel skin for datepicker*/
.datepick.buffel { 
	font-size:18px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}
/*nav bar on datepicker*/
.buffel .datepick-nav {
	background:rgba(211, 119, 218, 0.7);
	-moz-border-radius:10px 10px 0 0;
	-webkit-border-radius:10px 10px 0 0;
	border-radius:10px 10px 0 0;
	-moz-box-shadow:inset 2px 2px 5px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow:inset 2px 2px 5px rgba(0, 0, 0, 0.5);
	box-shadow:inset 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.buffel .datepick-ctrl {
	background:rgba(211, 119, 218, 0.7);
	-moz-border-radius:0 0 10px 10px;
	-webkit-border-radius:0 0  10px 10px;
	border-radius:0 0 10px 10px;
	-moz-box-shadow:inset -2px -2px 5px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow:inset -2px -2px 5px rgba(0, 0, 0, 0.5);
	box-shadow:inset -2px -2px 5px rgba(0, 0, 0, 0.5);
}
.buffel .datepick-nav a { color:#000; margin-top:3px; }

.buffel .datepick-cmd:hover {
	-moz-border-radius:8px 8px 0 0;
	-webkit-border-radius:8px 8px 0 0;
	border-radius:8px 8px 0 0;
	-moz-box-shadow:inset 1px 1px 3px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow:inset 1px 1px 3px rgba(0, 0, 0, 0.4);
	box-shadow:inset 1px 1px 3px rgba(0, 0, 0, 0.4);
	background:#fff;
}

.buffel .datepick-ctrl a:hover {
	-moz-border-radius:0 0 8px 8px;
	-webkit-border-radius:0 0 8px 8px;
	border-radius:0 0 8px 8px;
	background:#f08080;
}
/*month dropdown*/
.buffel .datepick-month-header {
	background:#b384b3;
	height:35px;
}
.buffel .datepick-month-header select {
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
    background:#fff;
    color:#000;
    height:30px;
    margin:3px 5px;
    padding:5px;
    -moz-box-shadow:inset -2px -2px 2px rgba(0, 0, 0, 0.5),
			inset 2px 2px 2px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow:inset -2px -2px 2px rgba(0, 0, 0, 0.5),
			inset 2px 2px 2px rgba(0, 0, 0, 0.5);
    box-shadow:inset -2px -2px 2px rgba(0, 0, 0, 0.5),
			inset 2px 2px 2px rgba(0, 0, 0, 0.5);
}
/*date range month table*/
.buffel .datepick-month th {
	background:rgba(167,213,215,0.8);
	border:1px solid #777;
	text-shadow:2px 2px 4px rgba(167,231,215,0.9);
	color:#000;
}
.buffel .datepick-month td a:hover {
	background:rgba(155,203,204,1);
}/*###############
@10.3 - DropDown Select buffel theme
###############*/
.buffel .ddTitle {
	background:#000;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	height:20px;
	width:300px !important;
	-moz-box-shadow:inset 2px 2px 10px rgba(255, 255, 255, 0.5);
	-webkit-box-shadow:inset 2px 2px 10px rgba(255, 255, 255, 0.5);
	box-shadow:inset 2px 2px 10px rgba(255, 255, 255, 0.5);
	padding:5px 3px;
	text-indent:0;
	cursor:default;
	overflow:hidden;
	position:relative;
}
.buffel .ddTitle span.arrow {
	background:transparent url(../img/buffel/down-arrow.png) no-repeat top left;
	float:right;
	display:inline-block;
	width:24px;
	height:24px;
	cursor:pointer;
	position:relative;
	top:-1px;
}
.buffel .ddTitle:hover { cursor:pointer; }
.buffel .ddTitle:hover span.arrow,
.buffel .ddTitle span.arrow:hover {
	background-position:left -25px !important;
	cursor:pointer;
}
.buffel .ddTitle span.ddTitleText {
	overflow:hidden;
	font-family:"OFL Sorts Mill Goudy+TT", Georgia, "Times New Roman", Times, serif;
	font-size:16px;
	font-weight:bold;
	line-height:33px;
	color:#fff;
	position:absolute;
	top:5px;
	left:10px;
	_position:relative;
	_top:4px;
	overflow-x:hidden;
	width:75%;
}
.buffel .ddTitle span.ddTitleText img{text-align:left; padding:0 2px 0 0;}
.buffel .ddTitle img.selected {
	padding:0 2px 0 0;
	vertical-align:top;
}
.buffel .ddChild {
	background:#fff;
	-moz-border-radius:0 0 10px 10px;
	-webkit-border-radius:0 0 10px 10px;
	border-radius:0 0 10px 10px;	
	border:1px solid #c3c3c3;
	border-top:none;
	padding-bottom:20px;
	display:none;
	margin:0;
	position:absolute;
	overflow:auto;
	overflow-x:hidden !important;
	font-size:14px;
	-moz-box-shadow:inset 2px -10px 10px rgba(219, 5, 85, 0.2);
	width:297px !important;
}

.buffel .ddChild .opta a, .buffel .ddChild .opta a:visited { padding-left:10px}
.buffel .ddChild a {
	display:block;
	padding:3px 0 3px 3px;
	text-decoration:none;
	color:#000;
	overflow:hidden;
	white-space:nowrap;
	cursor:pointer;
}
.buffel .ddChild a:hover { background-color:#66CCFF; }
.buffel .ddChild a img {
	border:0;
	padding:0 2px 0 0;
	vertical-align:middle;
}
.buffel .ddChild a.selected { background-color:#9f76a1; }
.buffel .borderTop { border-top:1px solid #c3c3c3  !important; }
.buffel .noBorderTop { border-top:none 0  !important; }/* jQuery plugin JSONtip Main CSS theme
	version: 2.0 - March 26, 2011
	author: stephen giorgi
	author email: stephen.giorgi@alphavega.com
	URL: http://www.alphavega.com/json-tip
	Copyright (C) 2011 alpha vega llc

	=================
	Table of Contents
	=================
	@1 - JSON tip
	@2 - Close Icon
		@2.1 - Close Icon Hover
		@2.2 - Close Icon Opposite Side
	@3 - Arrows
		@3.1 - Right
		@3.2 - Left
		@3.3 - Bottom Left
		@3.4 - Top Left
		@3.5 - Bottom Right
		@3.6 - Top Right
		@3.7 - Top Center
		@3.8 - Bottom Center
	@4 - Loading Icon

	=======
	License
	=======
	This program is free software; you can redistribute it and/or
	modify it under the terms of the GNU General Public License
	as published by the Free Software Foundation; either version 2
	of the License, or (at your option) any later version.
	
	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU General Public License for more details.
	
	You should have received a copy of the GNU General Public License
	along with this program; if not, write to the Free Software
	Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
*/


/*=============*
 * @1 JSON tip *
 *=============*/
.JSONtip {
	background:#fff;
	/* in order to get the glass effect we must use the background-clip padding-box property
	 * This lets the white background not bleed into the border and cause it to be light grey instead of see through black
	 */
	-moz-background-clip:padding-box;
	-webkit-background-clip:padding-box;
	background-clip:padding-box;
	border:10px solid rgba(0,0,0,0.2);
	/*the border on the "glass" is made using a small white box shadow that goes all the way around the element*/
	-moz-box-shadow:0px 0px 1px 1px rgba(255,255,255,0.4);
	-webkit-box-shadow:0px 0px 1px 1px rgba(255,255,255,0.4);
	box-shadow:0px 0px 1px 1px rgba(255,255,255,0.4);
	/*rounded the corners of the glass so you don't cut yourself*/
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
	
	width:300px;		
	min-height:25px;
	max-height:80%;
	position:absolute;
	z-index:-10;
	display:none;
	color:#000;
}
.JSONtip h4 {
	border-bottom:3px solid #333;
	margin:5px 0;
	padding-bottom:5px;
	display:block;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	color:#333;
	text-align:center;
	text-shadow:-1px -1px 3px rgba(0,0,0,0.4);
}
.JSONtip .JSONtipBody {
	margin:8px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
}

/*===============*
 * @2 Close Icon *
 *===============*/
.JSONtipClose {
	/*the close icon has a similar glass effect, but without needing the clip property*/
	background:rgba(0,0,0,0.2);
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	-webkit-box-shadow:inset 1px 1px 2px rgba(255,255,255,0.5);
	-moz-box-shadow:inset 1px 1px 2px rgba(255,255,255,0.5);
	box-shadow:inset 1px 1px 2px rgba(255,255,255,0.5);

	padding-left:2px;	/*to center the text better*/
	width:24px;
	height:24px;
	position:absolute;
	top:-23px;
	right:-18px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:19px;
	font-weight:bold;
	color:#025CB7;
	text-align:center;
	text-shadow:0 1px 1px #fff;
	cursor:pointer;
}

/*@2.1 Close Icon Hover*/
.JSONtipClose:hover {
	background:#069;
	color:#000;
	text-shadow:0px 1px 1px #fff;
}

/*@2.2 Close Icon Opposite Side*/
.JSONtip.tipLeft .JSONtipClose,
.JSONtip.tipTopRight .JSONtipClose,
.JSONtip.tipBottomRight .JSONtipClose {
	left:-18px;
}
/*@2.3 No close Icon*/
.JSONtip.noClose .JSONtipClose { display:none; }


/*================*
 * @3 Arrow Icons *
 *================*/
.JSONtipArrow,
.JSONtipArrow .inArrow {
	border:12px solid transparent;
	position:absolute;
	width:0;
	height:0;
}
.JSONtipArrow .inArrow {
	border:11px solid transparent;
}

/*@3.1 Right -|- Default, the tip is on the Right side of the element & the arrow faces Left*/
.JSONtip.tipRight .JSONtipArrow {
	border-right:22px solid rgba(255, 255, 255, 0.4);
	top:2%;
	left:-45px;

}
.JSONtip.tipRight .JSONtipArrow .inArrow {
	border-right:19px solid rgba(0,0,0,0.5);
	top:-11px;
	left:-7px;
}

/*@3.3 Left -|- the tip is on the Left side of the element, & the arrow faces Right*/
.JSONtip.tipLeft .JSONtipArrow {
	border-left:22px solid rgba(255, 255, 255, 0.4);
	top:2%;
	right:-45px;
}
.JSONtip.tipLeft .JSONtipArrow .inArrow {
	border-left:19px solid rgba(0,0,0,0.5);
	top:-11px;
	right:-7px;
}

/*@3.3 Bottom Left -|- the tip is on the BOTTOM LEFT of the element, & the arrow faces UP on the LEFT SIDE*/
.JSONtip.tipBottomLeft .JSONtipArrow {
	border-bottom:22px solid rgba(255, 255, 255, 0.4);
	top:-43px;
	left:2%;
}
.JSONtip.tipBottomLeft .JSONtipArrow .inArrow{
	border-bottom:19px solid rgba(0,0,0,0.5);
	top:-8px;
	left:-11px;
}

/*@3.4 Top Left -|- the tip is on the TOP LEFT of the element, & the arrow faces DOWN on the LEFT SIDE*/
.JSONtip.tipTopLeft .JSONtipArrow {
	border-top:22px solid rgba(255, 255, 255, 0.4);
	bottom:-43px;
	left:2%;
}
.JSONtip.tipTopLeft .JSONtipArrow .inArrow{
	border-top:19px solid rgba(0,0,0,0.5);
	bottom:-8px;
	left:-11px;
}

/*@3.5 Bottom Right -|- the tip is on the BOTTOM RIGHT of the element, & the arrow faces UP on the RIGHT SIDE*/
.JSONtip.tipBottomRight .JSONtipArrow {
	border-bottom:22px solid rgba(255, 255, 255, 0.4);
	top:-43px;
	right:2%;
}
.JSONtip.tipBottomRight .JSONtipArrow .inArrow{
	border-bottom:19px solid rgba(0,0,0,0.5);
	top:-8px;
	left:-11px;
}

/*@3.6 Top Right -|- the tip is on the TOP RIGHT of the element, & the arrow faces DOWN on the LEFT RIGHT*/
.JSONtip.tipTopRight .JSONtipArrow {
	border-top:22px solid rgba(255, 255, 255, 0.4);
	bottom:-43px;
	right:2%;
}
.JSONtip.tipTopRight .JSONtipArrow .inArrow {
	border-top:19px solid rgba(0,0,0,0.5);
	bottom:-8px;
	right:-11px;
}

/*@3.7 Top Center -|- the tip is on the TOP CENTER of the element, & the arrow faces DOWN in the CENTER*/
.JSONtip.tipTopCenter .JSONtipArrow {
	border-top:22px solid rgba(255, 255, 255, 0.4);
	bottom:-43px;
	left:138px;		/*You can't use left 50% because it will put the left corner on the 50% mark, and it will be slightly off center, you can try 45%-46%, but it's still not perfect, the calculation is simple:
	(width of tip / 2) - width of outer arrow border
	(300 / 2) - 12 = 138*/
}
.JSONtip.tipTopCenter .JSONtipArrow .inArrow{
	border-top:19px solid rgba(0,0,0,0.5);
	bottom:-8px;
	left:-11px;
}

/*@3.8 Bottom Center -|- the tip is on the BOTTOM CENTER of the element, & the arrow faces UP in the CENTER*/
.JSONtip.tipBottomCenter .JSONtipArrow {
	border-bottom:22px solid rgba(255, 255, 255, 0.4);
	top:-43px;
	left:138px;		/*You can't use left 50% because it will put the left corner on the 50% mark, and it will be slightly off center, you can try 45%-46%, but it's still not perfect, the calculation is simple:
	(width of tip /2) - width of border
	(300 / 2) - 12 = 138*/
}
.JSONtip.tipBottomCenter .JSONtipArrow .inArrow{
	border-bottom:19px solid rgba(0,0,0,0.5);
	top:-8px;
	left:-11px;
}

/*=================*
 * @4 Loading Icon *
 *=================*/
.JSONloading {
	position:absolute;
	top:40%;
	left:45%;
}